<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Chat App</title>
        <style>
            body {
                font-family: sans-serif;
                background-color: #f2f2f2;
                justify-content: center;
                width: 50%;
                margin: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            h1 {
                font-size: 24px;
                font-weight: bold;
                text-align: center;
            }
            form {
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
            }
            label {
                margin: 0 5px;
                font-size: 16px;
                font-weight: bold;
            }
            .input {
                flex: 1;
                margin: 0 5px;
                padding: 8px;
                border: 1px solid #ccc;
                border-radius: 5px;
                width: 100%;
                font-size: 14px;
            }
            button[type="submit"] {
                display: block;
                width: 100%;
                margin: 0 5px;
                padding: 8px 12px;
                background-color: #4CAF50;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: all 0.3s;
            }
            button[type="submit"]:hover {
                background-color: #3E8E41;
            }
            button[type="submit"]:active {
                background-color: #367C39;
            }
            table {
                width: 100%;
            }
            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>助手设定</h1>
        <form method="POST" onsubmit="return onSubmit()">
            <table>
                <input type="text" id="robot" name="robot" class="hidden" value="{{ robot }}"/>
                <tr><td>
                    <label for="botname">昵称：</label>
                </td><td>
                    <input type="text" id="botname" name="botname" value="{{ robot.botname }}" class="input" required autofocus autocomplete="off"/>
                </td></tr>
                <tr><td>
                    <label for="model">模型：</label>
                </td><td>
                    <select id="model" name="model" class="input">
                        <option value="gpt-4o"{% if robot.model == 'gpt-4o' %} selected{% endif %}>gpt-4o</option>
                        <option value="gpt-4o-mini"{% if robot.model == 'gpt-4o-mini' %} selected{% endif %}>gpt-4o-mini</option>
                        <option value="gpt-3.5-turbo"{% if robot.model == 'gpt-3.5-turbo' %} selected{% endif %}>gpt-3.5-turbo</option>
                        <option value="gpt-4-turbo"{% if robot.model == 'gpt-4-turbo' %} selected{% endif %}>gpt-4-turbo</option>
                        <option value="gpt-4-vision"{% if robot.model == 'gpt-4-vision' %} selected{% endif %}>gpt-4-vision</option>
                    </select>
                </td></tr>
                <tr><td>
                    <label for="temperature">温度：</label>
                </td><td>
                    <input type="number" id="temperature" name="temperature" value="{{ robot.temperature }}" step="0.1" min="0.0" max="1.0" class="input" required/>
                </td></tr>
                <tr><td>
                    <label for="max-tokens">长度：</label>
                </td><td>
                    <input type="number" id="max_tokens" name="max_tokens" value="{{ robot.max_tokens }}" step="1" min="1" max="4096" class="input" required/>
                </td></tr>
                <tr><td>
                    <label for="instruction">指示：</label>
                </td><td>
                    <textarea id="instruction" name="instruction" rows="3" class="input" placeholder="例如：你是一个和蔼可亲的助手" autocomplete="off">{{ robot.instruction or '' }}</textarea>
                </td></tr>
                <tr><td>
                    <label for="tools">工具：</label>
                </td><td>
                    <input id="tools" name="tools" value="{{ robot.tools or '' }}" class="input" placeholder="例如：web shell media image clipboard" autocomplete="off"/>
                </td></tr>
                <tr><td>
                    <label for="tools">招呼：</label>
                </td><td>
                    <input id="introduction" name="introduction" value="{{ robot.introduction or '' }}" class="input" placeholder="例如：我是助手，今天有什么可以帮助您的？" autocomplete="off"/>
                </td></tr>
            </table>
            <br/>
            <button type="submit">保存设定</button>
        </form>
    </body>
    <script src="{{ url_for('static', filename='js/md5.min.js') }}"></script>
    <script>
        {% if error %}
        alert("{{ error }}");
        {% endif %}
        function onSubmit() {
            var botname = document.getElementById("username").value.trim();
            if (botname.length <= 0) {
                alert("请输入昵称");
                return false;
            }
            return true;
        }
    </script>
</html>
